<div ng-controller="ExperimentsCtrl">
    <div class="toolbar">
        <a href="" id="searchMoreLess" ng-attr-title="{{data.filtersApplied ? 'Filters applied' : 'Add filters to search'}}" ng-show="!noExperiments" ng-click="popoverClicked();" uib-popover-template="dynamicPopover.templateUrl" popover-placement="bottom" popover-is-open="showFilterPopover"><span ng-class="{filtersApplied: data.filtersApplied}"></span></a>
        <button id="btnNewExperiment" class="blue" ng-click="openExperimentModal()" ng-class="{disabled: !applicationsLoaded}" ng-disabled="!applicationsLoaded">Create Experiment</button>
        <span ng-if="data.enableCardView" id="checkToggleListSpan" style="position: relative;"><input type="checkbox" id="chkToggleList" ng-model="data.showingGrid"
               ng-click="switchToGrid()" ng-class="{disabled: disableShowAsGrid}" ng-disabled="disableShowAsGrid"/><label id="chkToggleListLabel" for="chkToggleList" ng-class="{disabled: disableShowAsGrid}" ng-disabled="disableShowAsGrid" class="checkboxLabel">Card view</label>
        </span>

        <div id="basicSearch">
            <form id="experimentsForm">
                <div class="search">
                    <input search type="text" autocorrect="off" autocapitalize="off" placeholder="Search"
                           ng-model="data.query"
                           ng-change="search()"/>
                    <a href="#" class="clear" ng-click="clearSearch()">Clear Search</a>
                </div>
            </form>
        </div>
    </div>

    <div ng-if="data.enableCardView" id="gridView" class="leftCol" ng-show="data.showGrid">
        <div ng-if="experiments.length === 0" id="emptyHomeList">You have no running experiments.</div>
        <div>
        <ul ng-if="experiments.length > 0" id="exprSummary">
            <li ng-repeat="experiment in cardViewExperiments" ng-class="{favorite: experiment.isFavorite}">
                <div class="summaryHead">
                    <a href="#" favorites-star favorites-star-experiment-id="experiment.id" favorites-star-favorites-object="favoritesObj" ng-attr-is-favorite="{{experiment.isFavorite}}" after-favorite-func="handleCardStarAnimation" class="star" title="Mark as Favorite"></a>
                    <label-link-content state="{{experiment.state}}" href="{{customHref}}" ng-click="hasUpdatePermission(experiment) && experiment.state === 'DRAFT' && openExperimentModal(experiment)" class="exprWrapper" exp-id="{{experiment.id}}" custom-tooltip="{{experiment.homePageTooltip}}" has-update="{{hasUpdatePermission(experiment)}}" read-only="{{!hasUpdatePermission(experiment)}}">
                        <h3>{{experiment.applicationName}}</h3>
                        <h2>{{experiment.label}}</h2>
                    </label-link-content>
                    <div style="margin-top: 20px;">
                        <img class="gridStateImage" ng-src="{{stateImgUrl(experiment.state)}}"
                                 alt="{{capitalizeFirstLetter(stateName(experiment.state))}}"
                                 sortindex="2"> <span style="position: relative; top: -19px; left: 8px;">{{capitalizeFirstLetter(stateName(experiment.state))}}</span>
                        <div class="actionContainer">
                            <a class="command start" href="#" title="Start" onclick="return false;" ng-click="changeState(experiment, 'RUNNING')"
                               ng-if="hasUpdatePermission(experiment) && (experiment.state === 'DRAFT' ||
                                      experiment.state === 'PAUSED')">
                                Start
                            </a>
                            <a class="command stop" href="#" title="Stop" onclick="return false;" ng-click="changeState(experiment, 'PAUSED')"
                                    ng-if="hasUpdatePermission(experiment) && experiment.state === 'RUNNING'">
                                Pause
                            </a>
                            <a class="command terminate" href="#" title="Terminate" onclick="return false;" ng-click="changeState(experiment, 'TERMINATED')"
                                    ng-if="hasUpdatePermission(experiment) && (experiment.state === 'RUNNING'||
                                           experiment.state === 'PAUSED')">
                                Stop
                            </a>
                            <a class="command start" href="#" style="visibility: hidden;" onclick="return false;" ng-if="experiment.state === 'TERMINATED'">&nbsp;</a>
                            <a class="command delete" href="#" title="Delete" onclick="return false;" ng-click="deleteExperiment(experiment)"
                               ng-if="hasDeletePermission(experiment) && (experiment.state === 'DRAFT' ||
                                      experiment.state === 'TERMINATED')">
                                Delete
                            </a>
                        </div>
                    </div>
                </div>
                <div class="summaryBody">
                    <!-- This is a non-Draft experiment, we can tell that because it has sortedBuckets which is only necessary if we needed to detect winners, etc. -->
                    <table class="bucketsTable" ng-if="experiment.sortedBuckets && experiment.sortedBuckets.length > 0">
                        <tr ng-repeat="bucket in experiment.sortedBuckets" ng-class="{'lastRow':$last}">
                            <td custom-tooltip="{{bucket.homePageTooltip}}" ng-class="{indeterminate: bucket.improvementClass === 'indeterminate', winner: bucket.improvementClass === 'winner', nonWinner: bucket.improvementClass === 'loser'}"><label class="bucketLabel" title="{{ bucket.label + (bucket.isControl ? ' (control)' : (bucket.isBaseLine ? ' (baseline)' : '')) }}">{{bucket.label}} <span ng-if="bucket.isControl">(control)</span><span ng-if="bucket.isBaseLine">(baseline)</span></label><br/>
                                {{multiply100(bucket.actionRate) | number:1}} <span>&plusmn;{{actionDiffForCardView(bucket) | number:1}}%</span></td>
                            <td class="userCounts" title="Number of users assigned to this bucket">{{bucket.count}}</td>
                        </tr>
                        <tr><td style="text-align: right;">Total users:&nbsp;&nbsp;</td><td class="userCounts" title="Total users assigned to the experiment">{{experiment.totalNumberUsers | number:0}}</td></tr>
                    </table>
                    <!-- This is a Draft experiment that has some buckets defined, so we will display them -->
                    <table class="bucketsTable" ng-if="(!experiment.sortedBuckets) && (experiment.buckets && experiment.buckets.length > 0)">
                        <tr ng-repeat="bucket in experiment.buckets" ng-class="{'lastRow':$last}">
                            <td custom-tooltip="{{bucket.homePageTooltip}}"><label class="bucketLabel" title="{{ bucket.label + (bucket.isControl ? ' (control)' : (bucket.isBaseLine ? ' (baseline)' : '')) }}">{{bucket.label}} <span>{{(bucket.isControl ? ' (control)' : (bucket.isBaseLine ? ' (baseline)' : '')) }}</span></label><br/>
                                -- <span>&plusmn;--%</span></td>
                            <td class="userCounts" title="Number of users assigned to this bucket">--</td>
                        </tr>
                        <tr><td style="text-align: right;">Total users:&nbsp;&nbsp;</td><td class="userCounts" title="Total users assigned to the experiment">--</td></tr>
                    </table>
                    <!-- This is a Draft experiment that has NO buckets defined, so we will display a message to that effect -->
                    <table class="bucketsTable" ng-if="(!experiment.sortedBuckets) && (!experiment.buckets || experiment.buckets.length === 0)">
                        <tr>
                            <td class="lastRow" width="200px">
                                <label ng-if="!experiment.buckets">Loading...</label>
                                <label ng-if="experiment.buckets && experiment.buckets.length === 0">No buckets defined</label>
                            </td>
                        </tr>
                    </table>
                </div>
            </li>
        </ul>
            </div>
        <div style="text-align:right; clear: both; margin-right: 70px;" ng-show="cardViewTotalItems > 0">
            <span style="font-size:13px; color:#888; position: relative; top: -20px; left: -5px;">{{cardViewPageRangeStart()}} - {{cardViewPageRangeEnd()}} of {{cardViewTotalItems}}</span>

            <div style="display: inline;">
                <uib-pagination total-items="cardViewTotalItems" items-per-page="8" ng-model="cardViewData.cardViewCurrentPage" ng-change="cardViewPageChanged()" max-size="5" rotate="false"></uib-pagination>
            </div>
        </div>
    </div>

    <div id="experimentsList" ng-show="!noExperiments && !data.showGrid">
        <div class="tableContainer">
            <table sort-direction-icon col-resizeable>
                <tr>
                    <th style="width:7%"><span class="colLabel">Fave</span></th>
                    <th style="width:9%" class="_applicationName" ng-click="sortBy('applicationName')">
                        <span class="colLabel">App</span>
                    </th>
                    <th style="width:18%" class="_label" ng-click="sortBy('label')"><span class="colLabel">Experiment</span></th>
                    <th style="width:12%" class="_creatorID" ng-click="sortBy('creatorID')"><span class="colLabel">Created By</span></th>
                    <th style="width:10%" class="_samplingPercent" ng-click="sortBy('samplingPercent')">
                        <span class="colLabel">Sampling %</span>
                    </th>
                    <th style="width:9%" class="_startTime" ng-click="sortBy('startTime')"><span class="colLabel">Start</span></th>
                    <th style="width:9%" class="_endTime" ng-click="sortBy('endTime')"><span class="colLabel">End</span></th>
                    <th style="width:9%" class="_modificationTime" ng-click="sortBy('modificationTime')"><span class="colLabel">Modified</span></th>
                    <th style="width:9%" class="icon _state">
                        <span class="headingLabel colLabel" ng-click="sortBy('state')">
                            Status
                        </span>
                        <span class="info" style="z-index: 1000;" help help-content="{{help.status}}"></span>
                    </th>
                    <th style="width:8%" class="icon">Actions</th>
                </tr>
                <tr ng-repeat="experiment in experiments">
                    <td ng-class="{favorite: experiment.isFavorite}">
                        <a href="#" favorites-star favorites-star-experiment-id="experiment.id" favorites-star-favorites-object="favoritesObj" ng-attr-is-favorite="{{experiment.isFavorite}}" favorites-star-parent-tag="td" after-favorite-func="handleListStarAnimation" class="star"></a>
                    </td>
                    <td class="app">
                        <span title="{{experiment.applicationName}}">{{experiment.applicationName}}</span>
                    </td>
                    <td>
                        <label-link state="{{experiment.state}}" exp-id="{{experiment.id}}"
                                    exp-label="{{experiment.label}}" has-update="{{hasUpdatePermission(experiment)}}" read-only="{{!hasUpdatePermission(experiment)}}"></label-link>
                    </td>
                    <td>
                        <span title="{{experiment.creatorID}}">{{experiment.creatorID}}</span>
                    </td>
                    <td class="sampling">{{multiply100(experiment.samplingPercent)}}</td>
                    <td class="date">{{experiment.startTime | date:'MMM dd, yyyy'}}</td>
                    <td class="date">{{experiment.endTime | date:'MMM dd, yyyy'}}</td>
                    <td class="date">{{experiment.modificationTime | date:'MMM dd, yyyy'}}</td>
                    <td class="icon">
                        <img ng-src="{{stateImgUrl(experiment.state)}}"
                             alt="{{capitalizeFirstLetter(stateName(experiment.state))}}"
                             custom-tooltip="{{capitalizeFirstLetter(stateName(experiment.state))}}" displayRight="true"
                             sortindex="2">
                    </td>
                    <td class="icon">
                        <a class="command start" href="#" title="Start" onclick="return false;" ng-click="changeState(experiment, 'RUNNING')"
                           ng-if="hasUpdatePermission(experiment) && (experiment.state === 'DRAFT' ||
                                  experiment.state === 'PAUSED')">
                            Start
                        </a>
                        <a class="command stop" href="#" title="Stop" onclick="return false;" ng-click="changeState(experiment, 'PAUSED')"
                                ng-if="hasUpdatePermission(experiment) && experiment.state === 'RUNNING'">
                            Pause
                        </a>
                        <a class="command terminate" href="#" title="Terminate" onclick="return false;" ng-click="changeState(experiment, 'TERMINATED')"
                                ng-if="hasUpdatePermission(experiment) && (experiment.state === 'RUNNING'||
                                       experiment.state === 'PAUSED')">
                            Stop
                        </a>
                        <a class="command start" href="#" style="visibility: hidden;" onclick="return false;" ng-if="experiment.state === 'TERMINATED'">&nbsp;</a>
                        <a class="command delete" href="#" title="Delete" onclick="return false;" ng-click="deleteExperiment(experiment)"
                           ng-if="hasDeletePermission(experiment) && (experiment.state === 'DRAFT' ||
                                  experiment.state === 'TERMINATED')">
                            Delete
                        </a>
                    </td>
                </tr>
            </table>
        </div>
        <div style="text-align:right">
            <span style="font-size:13px; color:#888; position: relative; top: -20px; left: -5px;">{{pageRangeStart()}} - {{pageRangeEnd()}} of {{totalItems}}</span>

            <div style="display: inline;" ng-show="totalItems > 0">
                <uib-pagination total-items="totalItems" items-per-page="10" ng-model="currentPage" ng-change="pageChanged()" max-size="5" rotate="false"></uib-pagination>
            </div>
        </div>
    </div>
    <div class="dlgZeroNoExperiments" ng-show="noExperiments">
        You are not currently authorized for any applications in the Wasabi A/B Testing system.<br/><br/>
        If you need to be authorized for
        an <strong>existing application</strong>, please find it in the list below on the left, click on it, and then
        an email will be sent to the admins to request access.<br/><br/>
        If you need access to a <strong>new application</strong>, please click on Create Experiment to create a new experiment.  For Application Name,
        select New Application, specify the new name of the new application, and create the experiment.  You will then be
        the admin of that new application name.
    </div>
    <div ng-if="noExperiments">
        <ng-include src="'views/AllApplicationsTable.html'"></ng-include>
    </div>
</div>
